<template>
  <div class="box">
    <div class="dir">
      <van-swipe class="my-swipe" :autoplay="4000" indicator-color="black" style="height: 375px;">
        <van-swipe-item>
          <img src="@/assets/kang/13.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/kang/12.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/kang/11.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/kang/10.png" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="copm">
      <button class="tow" @click="fun('/')">
        <img src="@/assets/kang/15.png" alt />
      </button>
      <div class="noe">
        <button class="trial" @click="fun('/')">
          <img src="@/assets/kang/14.png" alt />
        </button>
        <button class="ambitus" @click="fun('/')">
          <img src="@/assets/kang/16.png" alt />
        </button>
      </div>
    </div>
  </div>
</template>
    
<script>
export default {};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: white;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.box {
  width: 100%;
  height: 100%;
  margin-bottom: 0.15rem;
  margin-top:.5rem;
}
.dir {
  width: 100%;
  height: 3.75rem;
  /* background-color: cadetblue; */
  margin-bottom: 0.25rem;
}

.copm {
  width: 90%;
  height: 1.55rem;
  margin: auto;
  /* background-color: beige; */
}
.copm > .tow {
  width: 1.45rem;
  height: 1.55rem;
  border: none;
  float: left;
}
.noe {
  width: 1.8rem;
  height: 100%;
  float: right;
  /* background-color: gold; */
}
.noe > .trial {
  width: 100%;
  height: 0.72rem;
  border: none;
  margin-bottom: 0.12rem;
}
.noe > .ambitus {
  width: 100%;
  height: 0.72rem;
  border: none;
}
img {
  width: 100%;
  height: 100%;
}
</style>